<app-inner-header name="Domains" [loadCounter]="loadCounter"></app-inner-header>
 <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" [(selectedIndex)]="selectedIndex">
  <mat-tab label="List">
    <mat-card *ngIf="loadCounter === 0 && !onlyValues(list)?.length">
      <mat-card-content>
        Here no any domains yet. You can start creating them or try to import from existing config.
        <button mat-raised-button color="basic" class="but-spacer-left switch-button"
                (click)="importDirectory()">
          Import
        </button>
      </mat-card-content>
    </mat-card>
    <mat-card *ngIf="onlyValues(list)?.length">
      <mat-card-header>
        <mat-card-header>
          <mat-card-subtitle>Domains</mat-card-subtitle>
        </mat-card-header>
      </mat-card-header>
      <mat-card-content>
        <div *ngFor="let domain of onlyValues(list); trackBy: trackByFnId;">
          <mat-expansion-panel (opened)="getDetails(domain.id)" (closed)="clearDetails(domain.id)">
            <mat-expansion-panel-header>
              <mat-panel-title>
                {{domain.name}}
              </mat-panel-title>
              <mat-panel-description>
                Click to get details
              </mat-panel-description>
            </mat-expansion-panel-header>
            <button mat-raised-button color="basic" (click)="copy(domain.id)"
                    *ngIf="listDetails[domain.id] && (listDetails[domain.id].parameters || listDetails[domain.id].variables)">
              Copy
            </button>
            <h3>Parameters:</h3>
            <div>
              <app-key-value-pad [exist]="listDetails[domain.id]"
                                 [items]="listDetails[domain.id]?.parameters"
                                 [newItems]="listDetails[domain.id]?.parameters?.new"
                                 [id]="domain.id"
                                 [toCopy]="toCopy"
                                 [store]="store"
                                 [dispatchers]="domainParamDispatchers"
              >
              </app-key-value-pad>
            </div>
            <h3>Variables:</h3>
            <div>
              <app-key-value-pad [exist]="listDetails[domain.id]"
                                 [items]="listDetails[domain.id]?.variables"
                                 [newItems]="listDetails[domain.id]?.variables?.new"
                                 [id]="domain.id"
                                 [toCopy]="toCopy"
                                 [store]="store"
                                 [dispatchers]="domainVarDispatchers"
              >
              </app-key-value-pad>
            </div>
          </mat-expansion-panel>
        </div>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="Add">
    <form class="spacer filter-container" (ngSubmit)="onDomainSubmit()">
      <mat-form-field hideRequiredMarker>
        <mat-label>Name</mat-label>
        <input matInput placeholder="New domain name" required name="name" [(ngModel)]="newDomainName">
      </mat-form-field>
      <button mat-raised-button color="primary" type="submit">Submit</button>
    </form>
    <mat-card>
      <mat-card-content>
        <button mat-raised-button color="basic" class="but-spacer-left switch-button spacer-bottom"
                [disabled]="!XMLBody"
                (click)="ImportXMLDomain()"
        >
          Import
        </button>
        <mat-expansion-panel (opened)="initEditor()">
          <mat-expansion-panel-header>
            <mat-panel-title>
              XML editor
            </mat-panel-title>
            <mat-panel-description>
              Click to get details
            </mat-panel-description>
          </mat-expansion-panel-header>
          <app-code-editor [(content)]="XMLBody" *ngIf="editorInited"></app-code-editor>
      </mat-expansion-panel>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="Delete/Rename">
    <form class="spacer filter-container" #deleteForm="ngForm">
      <div *ngFor="let domain of onlyValues(list); trackBy: trackByFnId;">
        <mat-form-field hideRequiredMarker>
          <input matInput placeholder="domain name" required [ngModel]="domain.name"
                 [name]="'domain::' + domain.id">
        </mat-form-field>
        <button mat-button color="accent" [disabled]="checkDirty(deleteForm.controls['domain::' + domain.id])"
                class="but-spacer-left"
                (click)="openBottomSheet(domain.id, deleteForm.controls['domain::' + domain.id].value, domain.name, 'rename')">
          Update
        </button>
        <button *ngIf="domain.enabled" mat-raised-button color="accent"
                class="but-spacer-left switch-button"
                (click)="switchDomain(domain)">
          Disable
        </button>
        <button *ngIf="!domain.enabled" mat-raised-button color="primary"
                class="but-spacer-left switch-button"
                (click)="switchDomain(domain)">
          Enable
        </button>
        <button mat-raised-button color="warn" class="but-spacer-left"
                (click)="openBottomSheet(domain.id, deleteForm.controls['domain::' + domain.id].value, domain.name, 'delete')">
          Delete
        </button>
      </div>
    </form>
  </mat-tab>
</mat-tab-group>
